<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.css" rel="stylesheet">
    <script src="${path}/resources/dist/js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>
    <script src="${path}/resources/dist/js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${path}/resources/dist/css/login3.css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
</head>
<body>
<div id="app">
    <template>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin: 10px 0">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="primary" @click="addUserRole">添加账号</el-button>
    <el-table size="small" :data="userList" highlight-current-row v-loading="loading" border
              element-loading-text="拼命加载中"
              style="width: 100%;">
        <el-table-column prop="adminid" label="序号" width="150"></el-table-column>
        <el-table-column prop="username" label="账号" width="150"></el-table-column>
        <el-table-column prop="rolename" label="角色" width="150"></el-table-column>
        <el-table-column prop="creationtime" label="创建日期" width="150"></el-table-column>
        <el-table-column prop="lastlogintime" label="最后登录日期" width="200"></el-table-column>
        <el-table-column prop="state" label="状态" width="250">
            <template slot-scope="scope">
                <el-button type="success">{{scope.row.state==1?"有效":"失效"}}</el-button>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
            <template slot-scope="scope">
                <el-button @click="initUpdate(scope.row)" type="primary" size="small">修改</el-button>
                <el-button @click="deleteUser(scope.row)" type="danger" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination background @current-change="currentChange" @size-change="sizeChange"
                   layout="sizes, prev, pager, next, jumper"
                   :page-sizes="[3, 6, 9]" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                   :current-page="pageInfo.page"></el-pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
        <el-form :model="editForm">
            <el-form-item label="账号"  :label-width="formLabelWidth">
                <el-input :disabled="true" v-model="editForm.username"></el-input>
                <el-form hidden v-model="editForm.adminid"></el-form>
            </el-form-item>
            <el-form-item label="角色" :label-width="formLabelWidth">
                <el-select v-model="editForm.roleid" @focus="roleTypeChange">
                    <el-option
                            v-for="item in roleTypeSelect"
                            :key="item.rid"
                            :label="item.rolename"
                            :value="item.rid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否有效" :label-width="formLabelWidth">
                <el-select v-model="editForm.state"  placeholder="请选择">
                    <el-option label="有效" value=1></el-option>
                    <el-option label="无效" value=0></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitUser(editForm)">确 定</el-button>
        </div>
    </el-dialog>
    </template>
</div>
</body>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            formLabelWidth:"150px",
            editFormVisible: false,
            userList:[],
            pageInfo: { //  分页数据
                pageSize: 3,// 每页显示的数据量
                page: 1, // 当前页
                total: 0 // 总条数
            },
            editForm:{
                method: "save",
            },
            roleTypeSelect:[]
        },
        methods:{
            deleteUser(row){
                axios.post("${path}/adminUser.do?method=deleteUser&userId="+row.adminid).then(response => {
                    if (true == response.data) {
                        vm.search();
                        vm.editFormVisible = false;// 关闭对话框
                        this.$notify({
                            title: '删除成功',
                            type: 'success'
                        });
                    }else {
                        this.$notify.error({
                            title: '删除失败',
                        });
                    }
                });

            },
            roleTypeChange(){
                axios.post("${path}/superSu.do?method=showRole").then(response => {
                    vm.roleTypeSelect = response.data;
                });
            },
            addUserRole(){
                window.location.href="addUserRole.jsp"
            },
            search() {
                axios.post("${path}/superSu.do?method=showUser&page="+this.pageInfo.page+"&pageSize="+this.pageInfo.pageSize).then(response => {
                    vm.userList = response.data.dataList;
                    vm.pageInfo = {
                        pageSize: response.data.pageNum,// 每页显示的数据量
                        page: response.data.nowPage, // 当前页
                        total: response.data.totalNum // 总条数
                    };
                });

            },
            currentChange(val) {// 当前页发生变化时触发的事件
                this.pageInfo.page = val;
                this.search();
            }
            ,
            sizeChange(val) {// 每页显示的数据量变化时触发的事件
                this.pageInfo.pageSize = val;
                this.search();
            },
            initUpdate(row){
                this.editForm = {
                    username:row.username,
                    adminid:row.adminid
                }
                this.editFormVisible = true;// 显示对话框
                this.editForm.method = "updateUser";//  调用servlet中的方法名
            },
            submitUser() {
                // 将data中editForm转为"key=value&key=value"
                var data = window.Qs.stringify(this.editForm);
                var vm = this
                axios.post("${path}/adminUser.do", data).then(response => {
                    if (true == response.data) {
                        vm.search();
                        vm.editFormVisible = false;// 关闭对话框
                        this.$notify({
                            title: '修改成功',
                            type: 'success'
                        });
                    }else {
                        this.$notify.error({
                            title: '修改失败',
                        });
                    }
                });
            },
        },
        mounted() {
            this.search();
        }
    });
</script>

</html>
